<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.6.1-错误处理</title>
</head>
<body>
    
</body>
    <script>
        /**
         * 框架错误处理机制的好坏直接决定了用户应用程序的健壮性，
         *  还决定了用户开发时处理错误的心智负担
        */

        /**
         * 为用户提供统一的错误处理接口
         * - 提供了 registerErrorHandler 函数，用户可以使用它注册错误处理程序， 
         *   然后在 callWithErrorHandling 函数内部捕获错误后，
         *   把错误传递给用户注册的错误处理程序
         * */ 
        // utils.js
        let handleError = null
        export default {
            foo(fn) {
                callWithErrorHandling(fn)
            },
            bar(fn) {
                callWithErrorHandling(fn)
            },
            // 用户可以调用该函数注册统一的错误处理函数
            registerErrorHandler(fn) {
                handleError = fn
            }
        }
        function callWithErrorHandling(fn) {
            try {
                fn && fn()
            } catch (e) {
                // 将捕获到的错误传递给用户的错误处理程序
                handleError(e)
            }
        }

        /**
         * 这时错误处理的能力完全由用户控制，用户既可以选择忽略错误，
         *   也可以调用上报程序将错误上报给监控系统
         *
         * */ 
        import utils from 'utils.js'
        // 注册错误处理程序
        utils.registerErrorHandler((e) => {
            console.log(e)
        })
        utils.foo(() => {/*...*/})
        utils.bar(() => {/*...*/})


        // 在 Vue.js 中，我们也可以注册统一的错误处理函数

        import App from 'App.vue'
        const app = createApp(App)
        app.config.errorHandler = () => {
            // 错误处理程序
        }


    </script>
</html>